<script setup lang="ts">
import {chatOrderApi} from '@/api/chat_order'
import {useMessage} from 'naive-ui'
import {chatPayApi} from '@/api/chat_pay'
import QrcodeVue from 'qrcode.vue'

const ms = useMessage()

interface Props {
	userChargeShow: boolean
	orderNo: string
}

interface Emit {
	(e: 'update:userChargeShow', userChargeShow: boolean): void

	(e: 'update:orderNo', orderNo: string): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emit>()

const userChargeShow = computed({
	get: () => props.userChargeShow,
	set: (userChargeShow: boolean) => emit('update:userChargeShow', userChargeShow),
})

const orderNo = computed({
	get: () => props.orderNo,
	set: (orderNo: string) => emit('update:orderNo', orderNo),
})

// 二维码链接地址
const qrCode = ref<string>('')
// 金额充值
const nSpinShow = ref<boolean>(false)
// 定时器用来判断订单状态
const intervalRef = ref()
// 获取支付地址
const getPayUrl = async () => {
	try {
		nSpinShow.value = true
		// 支付宝面对面支付处理
		const data = await chatPayApi.alipayFace2facePay({orderNo: orderNo.value})
		if (data.qrCode != undefined) {
			qrCode.value = data.qrCode
			ms.success(`创建订单成功，您可以在${data.timeoutExpress}之内完成本次支付`, {duration: 1000})
			// 定时去请求查看订单状态
			intervalRef.value = setInterval(async () => {
				// 查询订单状态是否已完成
				let finishPay: boolean = await chatOrderApi.checkOrderStatusFinished(data.orderNo)
				if (finishPay) {
					ms.success('支付成功，您可以去`绑定的邮箱`或`我的兑换码`查看', {
						closable: true,
						duration: 0
					})
					userChargeShow.value = false
					clearInterval(intervalRef.value)
				}
			}, 2000)
		}
	} catch (e: any) {
		nSpinShow.value = false
		userChargeShow.value = false
		clearInterval(intervalRef.value)
		ms.error(e.message)
	} finally {
		nSpinShow.value = false
	}
}

const closePay = () => {
	clearInterval(intervalRef.value)
}

// 暴露给父组件
defineExpose({getPayUrl})

// //兑换码
// const conversionCode = ref<string>('')
// watch(
// 	() => conversionCode.value,
// 	(conversionCode) => {
// 		console.log("conversionCode", conversionCode)
// 	},
// 	{immediate: true},
// )
</script>

<template>
	<NModal v-model:show="userChargeShow" style="width: 90%; max-width: 480px;" preset="card"
					title="立即充值"
					:on-after-leave="closePay"
					:on-esc="closePay"
	>
		<div class="space-y-4">
			<NTabs type="segment">
				<NTabPane name="alipay" tab="支付宝充值">
					<div style="margin-top:24px">
						<NSpin :show="nSpinShow" :style="nSpinShow?{'padding-bottom':'46px'}:''">
							<NCard :segmented="{content: 'hard'}"
										 :header-style="{ padding: '5px' }"
										 :content-style="{ padding: 0 }"
										 v-if="!nSpinShow"
							>
								<div class="text-center" style="margin:26px;">
									<qrcode-vue :value="qrCode" :size="266" level="H" renderAs="canvas"
															style="margin: 0 auto;border:  1px solid #000000;width: 266px;height: 266px"
									/>
								</div>
							</NCard>
						</NSpin>
						<!--						<NInput style="margin-top:16px" v-model:value="chargeAmount" type="text" placeholder="请输入充值金额"/>-->
						<!--						<NButton block style="margin-top:26px">-->
						<!--							立即充值-->
						<!--						</NButton>-->
					</div>
				</NTabPane>
				<!--				<NTabPane name="wechat" tab="微信充值">-->
				<!--					<div style="margin-top:24px">-->
				<!--						<NSpin :show="nSpinShow" :style="nSpinShow?{'padding-bottom':'46px'}:''">-->
				<!--							<NCard :segmented="{content: 'hard',}"-->
				<!--										 :header-style="{ padding: '5px' }"-->
				<!--										 :content-style="{ padding: 0 }"-->
				<!--										 v-if="!nSpinShow && chargeAmount > 0"-->
				<!--							>-->
				<!--								<div class="text-center" style="margin:26px">-->
				<!--									<img :src="qrCode.url" class="canvas" style="margin: 0 auto;border:  1px solid #000000" alt=""/>-->
				<!--								</div>-->
				<!--							</NCard>-->
				<!--						</NSpin>-->
				<!--						<NInput style="margin-top:16px" v-model:value="chargeAmount" type="text" placeholder="请输入充值金额"/>-->
				<!--						<NButton block style="margin-top:26px">-->
				<!--							立即充值-->
				<!--						</NButton>-->
				<!--					</div>-->
				<!--				</NTabPane>-->
			</NTabs>
		</div>
	</NModal>
</template>

<style scoped lang="less">

</style>
